<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    <link rel="stylesheet" href="./static/index.css" />
    <link rel="stylesheet" href="./static/element-ui/lib/theme-chalk/index.css" />
    <script src="./static/vue/vue.js"></script>
    <script src="./static/element-ui/lib/index.js"></script>
    <script src="./static/lodash.min.js"></script>
</head>

<body>
    <div id="app">

        <el-row>
            <el-col :xs="{span: 24, offset: 0}" :sm="{span: 24, offset: 0}" :md="{span: 18, offset: 3}"
                :lg="{span: 14, offset: 5}" :xl="{span: 12, offset: 6}">
                <div>
                    <h3>函数执行器</h3>
                </div>

            </el-col>
            <el-col :xs="{span: 24, offset: 0}" :sm="{span: 24, offset: 0}" :md="{span: 18, offset: 3}"
                :lg="{span: 14, offset: 5}" :xl="{span: 12, offset: 6}">
                <el-row>
                    <el-col :span="20">
                        <el-input v-model="call_string"> </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="success" class="btxs" @click="call_" @touchstart="call_">执行</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="result_print"> 执行结果： <span v-text="result"></span></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-table :data="logs" stripe border style="width: 100%">
                            <el-table-column prop="call_string" label="参数"> </el-table-column>
                            <el-table-column prop="result" label="执行结果"> </el-table-column>
                            <el-table-column prop="createdAt" label="执行时间"> </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    call_string: 'cat.walk("tomy")',
                    result: '',
                    visible: false,
                    logs: [],
                }
            },
            mounted() {
                this.exeLogs()
            },
            methods: {
                call_: _.throttle(function () {
                    fetch('./call_', { method: 'post', body: JSON.stringify({ call_string: this.call_string }) })
                        .then(res => {
                            return res.json()
                        }).then(res => {
                            // console.log('res',res)
                            if (res && !res.code) {
                                this.result = res.data;
                            } else {
                                this.$message.error(res.message);
                            }
                            this.exeLogs();
                        })
                }, 1000),
                exeLogs: _.throttle(function () {
                    fetch('./exeLogs', { method: 'post' })
                        .then(res => {
                            return res.json()
                        }).then(res => {
                            // console.log('res',res)
                            if (res && !res.code) {
                                this.logs = res.data;
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                }, 1000),
            }
        })
    </script>
</body>

</html>